/*!
 * Copyright 2014-2025  JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
 */
@import '../_tokens/index';

.copy-tooltip {
  position: absolute;
  top: var(--size-s1);
  right: var(--size-s1);

  display: flex;

  align-items: center;
  justify-content: center;
}

.copy-icon {
  display: none;

  padding: var(--size-s2);

  cursor: pointer;

  border-radius: var(--size-s2);

  &:hover {
    background: var(--color-w50);
  }

  &::before {
    display: block;
    flex: 0 0 auto;

    width: 24px;
    height: 24px;

    content: '';

    background-color: var(--text-color);
    mask: url('../_assets/copy-icon.svg') no-repeat center / contain;
  }
}

.theme-dark .copy-icon:hover {
  background: var(--color-w10);
}

/* stylelint-disable no-descending-specificity */
.js .sample-container:hover .copy-icon,
.js-touched .copy-icon {
  display: block;
}

.copy-popup-wrapper {
  z-index: 1;

  display: none;

  padding: 7px var(--size-s3) 7px var(--size-s2);

  cursor: default;

  color: var(--color-text-dt);
  border: 1px solid var(--color-w16);
  border-radius: var(--size-s1);
  background-color: var(--color-background-page-dt);

  > span {
    flex: 0 0 auto;
  }

  &.popup-to-left {
    margin-right: var(--size-s1);
  }
}

.table-row:hover,
.sample-container:hover {
  .copy-popup-wrapper.active-popup {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
}

.copy-popup-icon {
  width: 24px;
  height: 24px;

  background-image: url('../_assets/success-icon.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.anchor-wrapper {
  position: relative;

  margin-left: var(--size-s1);

  .copy-popup-wrapper {
    position: absolute;
    top: -8px;
    left: 100%;

    width: max-content;
    margin-left: var(--size-s1);

    &_bottom {
      top: 32px;
      left: calc(100% - 36px);
    }

    &_bottom-right {
      top: 32px;
      right: calc(100% - 32px);
      left: unset;
    }
  }
}

.anchor-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  margin: -4px 0;
  padding: var(--size-s1);

  transition: opacity 200ms ease-in-out;

  opacity: 0;
  color: var(--color-text);
  border-radius: var(--size-s1);
  background: var(--color-b08);

  &:hover {
    cursor: pointer;
  }

  &::before {
    display: block;

    width: 24px;
    height: 24px;

    content: '';

    background-color: var(--color-text);
    -webkit-mask: url('../_assets/anchor-copy-icon.svg') no-repeat center / contain;
    mask: url('../_assets/anchor-copy-icon.svg') no-repeat center / contain;
  }

  .theme-dark & {
    background: var(--color-w10);

    &::before {
      background-color: var(--color-w100);
    }
  }
}

.js .main-subrow:hover .anchor-icon {
  opacity: 1;
}
